<template>
	<div class="loadingPage">
		<div class="content">
			<div class="loader">
				<div class="box">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="box">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="box">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="box">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<p v-if="nowCount < srcList.length">{{ nowCount }}/{{ srcList.length }}</p>
			<p v-else class="animate__animated animate__pulse animate__infinite" @click="emits('update:show', true)">点击此处开始</p>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
const props = defineProps({
	show: {
		type: Boolean,
		default: false,
	},
});
const emits = defineEmits(["update:show"]);

const commonPath = "./img/";
const srcList = ["标题.jpg", "父亲.jpg", "母亲.jpg", "首图.jpg", "more.png", "setting.png", "shouye.png", "返回.png", "奖励.png", "故事1.jpg", "故事2.jpg", "故事3.jpg", "故事4.jpg", "fzda.png",'保护手册2.jpg','保护手册1.jpg'];
const nowCount = ref(0);
//加载完毕时间
const loadSetup = () => {
	console.log("资源加载完毕");
	//emits('update:show',true)
};

onMounted(() => {
	let queue = new Hilo.LoadQueue();
	queue.maxConnections = 2; //设置同时下载的最大连接数，默认为2

	queue.add(
		srcList.map((e) => {
			return {
				id: e.split(".")[0],
				noCache: false,
				src: commonPath + e,
			};
		})
	);
	queue.start();
	queue.on("load", function (e) {
		nowCount.value++;
	});
	queue.on("error", function (e) {
		console.log("资源加载出错" + e);
	});
	queue.on("complete", function (e) {
		loadSetup();
	});
	nextTick(() => {});
});
</script>
<style scoped>
.loadingPage {
	width: 100vw;
	height: 100vh;
	position: relative;
	background: url('../img/bg.jpg') no-repeat;
  background-size: 100%100%;
}
.content {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}
.content p {
	color: white;
	margin-top: 50px;
}
</style>
